/*
 * @Description: 英雄榜列表
 * @Author: kanglin
 * @Date: 2018-07-19 08:57:05
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    // @import '~src/assets/css/common.less';

    @pad-radio: 10rem/1536;

    .v-rankings{
        margin: 0 auto;
        width: 1124* @pad-radio;

        .rankings__header{
            height: 92* @pad-radio;
            width: 100%;
            background: #850817;
            color: #ffffff;
            line-height:92* @pad-radio;
            border-radius: 4px;
            margin-bottom: 50* @pad-radio;
            white-space: nowrap;
            text-align: center;
        }

        .rankings__header__staff{
            width: 33.3%;
            display: inline-block;
            opacity: .5;
            // text-indent: 194* @pad-radio;

        }

        .rankings__header__amount{
            width: 33.3%;
            display: inline-block;
            opacity: .5;
            text-indent: 40* @pad-radio;
        }

        .rankings__header__sort{
            width: 33.3%;
            display: inline-block;
            opacity: .5;
        }

        .rankings__list{
            padding-bottom: 20* @pad-radio;
        }
        .rankings__list__item{
            width: 100%;
            height: 168* @pad-radio;
            border-radius: 84*@pad-radio;
            background-image: linear-gradient(90deg, #cc16a7, #d72d9a);
            margin-bottom: 44*@pad-radio;
            position: relative;
            font-size: 15px;
            color: #ffffff;
        }
        .rankings__list__item__avatar,
        .rankings__list__item__name,
        .rankings__list__item__amount,
        .rankings__list__item__icon{
            display: inline-block;
            vertical-align: top;
        }

        .rankings__list__item__avatar{
            width: 144*@pad-radio;
            height: 144*@pad-radio;
            // border: 2px solid #fee414;
            border-radius: 50%;
            overflow: hidden;
            margin: 12*@pad-radio;
            background-size: 100%;
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/default-avantar.jpg');
            &>img{
                width: 100%;
            }
        }

        .rankings__list__item__name{
            width: 360*@pad-radio;
            margin-left: 4*@pad-radio;
            margin-right: 20*@pad-radio;
            line-height: 168* @pad-radio;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .rankings__list__item__amount{
            line-height: 168* @pad-radio;
        }

        .rankings__list__item__icon{
            display: inline-block;
            width: 132* @pad-radio;
            height: 132* @pad-radio;
            // background: #ffffff;
            position: absolute;
            right: 0;
            margin: 18* @pad-radio;
            border-radius: 50%;
            background-size: 100%;
            font-size: 40 * @pad-radio;
            line-height: 132* @pad-radio;
            text-align: center;
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/yuan_home.png');
        }

        .rankings__list__item__icon[data-ranking='0'] {
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/guanjun_home.png');
        }

        .rankings__list__item__icon[data-ranking='1'] {
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/yajun_home.png');
        }

        .rankings__list__item__icon[data-ranking='2'] {
             background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/jijun_home.png');
        }


        .empty__picture{
            width: 228 * @pad-radio;
            Height: 192 * @pad-radio;
            margin: 120* @pad-radio auto 108* @pad-radio;
            &>img {
                width: 100%;
            }
        }

        .empty__tips{
            color: #ffffff;
            text-align: center;
            font-size: 36 * @pad-radio;
        }

    }
</style>

<template>

	<div class="v-rankings">
		<div class="rankings__header">
			<span class="rankings__header__staff">
				店员
			</span>

			<span class="rankings__header__amount">
				总红包金额
			</span>

			<span class="rankings__header__sort">
				排名
			</span>
		</div>

		<ul
			v-if="data && data.length > 0"
			class="rankings__list">
			<li
				v-for="(item, index) in data"
				:key="item.id"
				class="rankings__list__item"
				@click="forwardTo(item.id)">
				<span class="rankings__list__item__avatar">
					<img
						:src="item.headimgurl"
						alt="">
				</span>

				<span class="rankings__list__item__name">
					{{ item.name }}
				</span>

				<span class="rankings__list__item__amount">
					{{ Number(item.total_amount).toFixed(2) }}元
				</span>

				<span
					:data-ranking="index"
					class="rankings__list__item__icon" >
					{{ index >2 ? index+1 :'' }}
				</span>

			</li>
		</ul>

		<div
			v-else
			class="empty">
			<div class="empty__picture">
				<img
					src="//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/default_home.png"
					alt="空">
			</div>
			<p class="empty__tips">
				尚没有人上榜，赶紧测肤领红包吧!
			</p>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Rankings',
	props: {
		data: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {};
	},
	methods: {
		/**
         * 转到详情页面
         * @param {String} id {店员id}
         * @return {undefined}
         */
		forwardTo(id) {
			this.$router.push({
				path: '/lucky-money-records',
				query: {
					store_admin_id: id,
				},
			});
		},
	},
};
</script>
